<template>
  <div>
    <n-input-number v-model:value="params.issueCount" :step="10" :min="20" :max="100" @update:value="getLottery"/>
    <div class="lottery-ball-history">
      <div class="lottery-ball-list">
        <span style="padding-right: 10px">红：</span>
        <div class="lottery-ball-list-item" v-for="ball in redBallList">
          <span>{{ ball[0] }}</span>
          <span>{{ ball[1] }}</span>
        </div>
      </div>
      <n-divider />
      <div class="lottery-ball-list">
        <span style="padding-right: 10px">蓝：</span>
        <div class="lottery-ball-list-item" v-for="ball in blueBallList">
          <span>{{ ball[0] }}</span>
          <span>{{ ball[1] }}</span>
        </div>
      </div>
      <n-divider />

    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: "Index",
  data() {
    return {
      redBallList: [],
      blueBallList: [],
      params:{
        name: "ssq",
        issueCount: 50,
        issueStart: "",
        issueEnd: "",
        dayStart: "",
        dayEnd: ""
      }
    }
  },
  mounted() {
    this.getLottery()
  },
  methods: {
    getLottery() {
      axios({
        withCredentials: false,
        method: "get",
        url: "/lottery/cwl_admin/front/cwlkj/search/kjxx/findDrawNotice",
        params: this.params,
      }).then(response => {
        if (response.status === 200 && response.data.state === 0) {
          const result = response.data.result || []
          let redBallList = []
          let blueBallList = []
          result.forEach(item => {
            const redNumberList = item.red.split(",");
            redBallList.push(...redNumberList);
            blueBallList.push(item.blue);
          })

          this.redBallList = this.sortLotteryMap(this.handleLotteryResult(redBallList));
          this.blueBallList = this.sortLotteryMap(this.handleLotteryResult(blueBallList));
        }
        console.log(this.redBallList)
        console.log(this.blueBallList)
      })
    },
    handleLotteryResult(ballList) {
      const numberBallToCountMap = new Map();
      ballList.forEach(ball => {
        if (!numberBallToCountMap.has(ball)) {
          numberBallToCountMap.set(ball, 1);
          return;
        }
        numberBallToCountMap.set(ball, numberBallToCountMap.get(ball) + 1)
      })
      return numberBallToCountMap;
    },
    sortLotteryMap(ballList) {
      const ballNumberList = Array.from(ballList);
      ballNumberList.sort((a, b) => a[1] - b[1]);
      return ballNumberList;
    }
  }
}
</script>

<style lang="scss" scoped>
.lottery-ball-history{
  display: flex;
  flex-direction: column;
  .lottery-ball-list {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    margin-bottom: 10px;
    .lottery-ball-list-item{
      display: flex;
      flex-direction: column;
      span{
        text-align: center;
        padding-right: 10px;
      }
    }
  }
}

</style>